<template>
  <div>
    <!-- 轮播图 -->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in swipeList" :key="item.url">
        <img :src="item.img">
      </mt-swipe-item>
    </mt-swipe>

    <!-- 轮播图下面六宫格-->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="../../images/menu1.png" alt="">
            <div class="mui-media-body">Home</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="../../images/menu2.png" alt="">
            <div class="mui-media-body">Email</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="../../images/menu3.png" alt="">
            <div class="mui-media-body">Chat</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="../../images/menu4.png" alt="">
            <div class="mui-media-body">location</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="../../images/menu5.png" alt="">
            <div class="mui-media-body">Search</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="../../images/menu6.png" alt="">
            <div class="mui-media-body">Phone</div></a></li>
       
    </ul> 
  </div>
</template>
<script>
// 引入烤面包模块
  import { Toast } from 'mint-ui';
  export default{
    data(){
      return {
        swipeList:[]
      }
    },
    created(){
      // 数据得到以后就执行
      this.getdata();

    },
    methods:{
      // 获取轮播图 信息
      getdata(){
        this.$http.get('http://vue.studyit.io/api/getlunbo').then(function(result){
          if (result.body.status === 0) {
          // 成功了
          this.swipeList = result.body.message;
        } else {
          // 失败的 弹出提示框 提示加载轮播图失败
          Toast("加载轮播图失败。。。");
        }
        })
        
      }
    }
    
  }
</script>
<style lang="scss" scoped>
// 轮播图样式
  .mint-swipe{
     height: 200px;
    .mint-swipe-item{
     img{
       width: 100%;
     }
    }
  }
  // 六宫格样式
  .mui-table-view.mui-grid-view.mui-grid-9 {
    background-color: #ffffff;
    border: none;
      img{
        width: 60px;
        height: 60px;
      }
      .mui-media-body{
        font-size: 13px;
      }
  }
</style>
